import React from 'react';

class List extends React.Component {
    state = {data:[]}
    componentDidMount(){
        fetch("https://cnodejs.org/api/v1/topics")
        .then(res=>res.json())
        .then(res=>{
            this.setState({
                data:res.data
            });
        })
    }
    render() {
        return (
            this.state.data.map((item,index)=>{
                return (
                    <div key={index} className="content">
                        <img src={item.author.avatar_url} className="image"/>
                        <span className='content-item'>
                            <span className='reply_count'>{item.reply_count}</span>
                            <span>/</span>
                            <span className='visit_count'>{item.visit_count}</span>
                        </span>
                        <span className='title'>{item.title}</span>
                    </div>
                )
            })
        )
    }
}

export default List;